import Head from 'next/head'
import { Row, Col, Affix, Breadcrumb } from 'antd'
import { marked } from 'marked'
import hljs from "highlight.js"
import 'highlight.js/styles/monokai-sublime.css'
import axios from 'axios'
import  servicePath  from '../config/apiUrl'
import Tocify from '../components/tocify.tsx'
import Header from '../components/Header'
import Author from '../components/Author'
import Footer from '../components/Footer'
import { CalendarTwoTone, FolderOpenTwoTone, FireTwoTone } from '@ant-design/icons'
import Link from 'next/link'

const Detailed = (props) => {
    const tocify = new Tocify()
    const renderer = new marked.Renderer();
    renderer.heading = function (text, level, raw) {
        const anchor = tocify.add(text, level);
        return `<a id="${anchor}" href="#${anchor}" class="anchor-fix"><h${level}>${text}</h${level}></a>\n`;
    };
    marked.setOptions({
        renderer: renderer,
        gfm: true,
        pedantic: false,
        sanitize: false,
        tables: true,
        breaks: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        }
    });

    let html = marked(props.article_content)
    return (
        <div>
            <Head>
                <title>Detailed</title>
                <meta name="description" content="Generated by create next app" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <Header />
            <Row className="comm-main" type="flex" justify="center">
                <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
                    <div>
                        <div className="bread-div">
                            <Breadcrumb>
                                <Breadcrumb.Item><Link href="/">首页</Link></Breadcrumb.Item>
                                <Breadcrumb.Item>{props.typeName}</Breadcrumb.Item>
                                <Breadcrumb.Item>{props.title}</Breadcrumb.Item>
                            </Breadcrumb>
                        </div>

                        <div>
                            <div className="detailed-title">
                            {props.title}
                            </div>

                            <div className="list-icon center">
                                <span><CalendarTwoTone />{props.addTime}</span>
                                <span><FolderOpenTwoTone />{props.typeName}</span>
                                <span><FireTwoTone />{props.view_count}人</span>
                            </div>

                            <div className="detailed-content" dangerouslySetInnerHTML={{ __html: html }} />

                        </div>

                    </div>
                </Col>

                <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
                    <Author />
                    <Affix offsetTop={5}>
                        <div className="detailed-nav comm-box">
                            <div className="nav-title">文章目录</div>
                            <div className="toc-list">
                                {tocify && tocify.render()}
                            </div>
                        </div>
                    </Affix>

                </Col>
            </Row>
            <Footer />
            <style>{`
            .comm-left{
                background-color: #FFF;
                padding:.3rem;
                border-radius: .3rem;
                border-bottom:1px solid #eee;
            }
            .comm-box{
                background-color: #FFF;
                margin-left: .5rem;
                padding:.3rem;
                border-radius: .3rem;
                border:1px solid #eee;
            }
            .comm-right{
                background-color: #FFF;
                margin-left: .5rem;
                padding:.3rem;
                border-radius: .3rem;
                border-bottom:1px solid #eee;

            }
            .comm-main{
                margin-top: .5rem;
            }
            .bread-div{
                padding: .5rem;
                border-bottom:1px solid #eee;
                background-color: #e1f0ff;
            }
            .detailed-title{
                font-size: 1.8rem;
                text-align: center;
                padding: 1rem;
            }
            .center{
                text-align: center;
            }
            .detailed-content{
                padding: 1.3rem;
                font-size: 1rem;
            }
            .list-icon span{
                padding: 0.3rem;
            }
            code {
                display: block ;
                background-color:#f3f3f3;
                padding: .5rem !important;
                overflow-y: auto;
                font-weight: 300;
                font-family: Menlo, monospace;
                border-radius: .3rem;
            }
            
            .title-anchor{
                color:#888 !important;
                padding:4px !important;
                margin: 0rem !important;
                height: auto !important;
                line-height: 1.2rem !important;
                font-size: .9rem !important;
                border-bottom: 1px dashed #eee;
            }
            .active{
                color:rgb(30, 144, 255) !important;
            }
            .nav-title{
                text-align: center;
                color: #888;
                border-bottom: 1px solid rgb(30, 144, 255);
            
            }
            .bread-div{
                padding: .5rem;
                border-bottom:1px solid #eee;
                background-color: #e1f0ff;
            }
            .detailed-title{
                font-size: 1.8rem;
                text-align: center;
                padding: 1rem;
            }
            .center{
                text-align: center;
            }
            .detailed-content{
                padding: 1.3rem;
                font-size: 1rem;
            }
            pre{
                display: block;
                background-color:#f3f3f3;
                padding: .5rem !important;
                overflow-y: auto;
                font-weight: 300;
                font-family: Menlo, monospace;
                border-radius: .3rem;
            }
            pre{
                background-color: #283646 !important;
            }
            pre >code{
                border:0px !important;
                background-color: #283646 !important;
                color:#FFF;
            
            }
            code {
                display: inline-block ;
                background-color:#f3f3f3;
                border:1px solid #fdb9cc;
                border-radius:3px;
                font-size: 12px;
                padding-left: 5px;
                padding-right: 5px;
                color:#4f4f4f;
                margin: 0px 3px;
            
            }
            
            .title-anchor{
                color:#888 !important;
                padding:4px !important;
                margin: 0rem !important;
                height: auto !important;
                line-height: 1.2rem !important;
                font-size: .7rem !important;
                border-bottom: 1px dashed #eee;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .active{
                color:rgb(30, 144, 255) !important;
            }
            .nav-title{
                text-align: center;
                color: #888;
                border-bottom: 1px solid rgb(30, 144, 255);
            
            }
            .article-menu{
                font-size:12px;
            }
            iframe{
                height: 34rem;
            }
            .detailed-content  img{
                width: 100%;
                border:1px solid #f3f3f3;
            }
            .title-level3{
                display: none !important;
            }
            .ant-anchor-link-title{
                font-size: 12px !important;
            }
            .ant-anchor-wrapper{
                padding: 5px !important;
            }            
            `}</style>
        </div>
    )
}

Detailed.getInitialProps = async (context) => {

    let id = context.query.id
    const promise = new Promise((resolve) => {

        axios(servicePath.getArticleById + id).then(
            (res) => {
                console.log(res)
                resolve(res.data.data[0])
            }
        )
    })

    return await promise
}

export default Detailed;